<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="退订使用中的资源（0）" name="first">
                    <div class="tabtop">
                        <div class="tabtopr">
                            <div class="tabtoprl">
                                <el-button type="info" style="margin-left: 0" plain>非五天无理由退订（0）</el-button>
                                <el-button type="info" plain>可五天无理由退订（0）</el-button>
                                <el-button type="info" plain>不可退订（0）</el-button>
                                <el-button type="info" plain>批量退订</el-button>
                            </div>
                        </div>
                        <div>
                            <el-button type="primary">退订记录</el-button>
                        </div>
                    </div>
                    <el-table :data="[{}]" style="width: 100%">
                        <el-table-column prop="date" label="名称/ID" />
                        <el-table-column prop="name" label="产品类型/规格" />
                        <el-table-column prop="name" label="区域" />
                        <el-table-column prop="name" label="开通/到期时间" />
                        <el-table-column prop="name" label="倒计时" />
                        <el-table-column prop="name" label="操作" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="退订未生效的资源（0）" name="second">
                    <div class="tabtop">
                        <div class="tabtopr">
                            <div class="tabtoprl">
                                <el-button type="info" style="margin-left: 0" plain>可退订（0）</el-button>
                                <el-button type="info" plain>不可退订（0）</el-button>
                                <el-button type="info" plain>批量退订</el-button>
                            </div>
                        </div>
                        <div>
                            <el-button type="primary">退订记录</el-button>
                        </div>
                    </div>
                    <el-table :data="[{}]" style="width: 100%">
                        <el-table-column prop="date" label="名称/ID" />
                        <el-table-column prop="name" label="产品类型/规格" />
                        <el-table-column prop="name" label="区域" />
                        <el-table-column prop="name" label="开通/到期时间" />
                        <el-table-column prop="name" label="操作" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="退订续费周期（0）" name="second1">
                    <div class="tabtop">
                        <div class="tabtopr">
                            <div class="tabtoprl">
                                <el-button type="info" style="margin-left: 0" plain>可退订（0）</el-button>
                                <el-button type="info" plain>不可退订（0）</el-button>
                                <el-button type="info" plain>批量退订</el-button>
                            </div>
                        </div>
                        <div>
                            <el-button type="primary">退订记录</el-button>
                        </div>
                    </div>
                    <el-table :data="[{}]" style="width: 100%">
                        <el-table-column prop="date" label="名称/ID" />
                        <el-table-column prop="name" label="产品类型/规格" />
                        <el-table-column prop="name" label="区域" />
                        <el-table-column prop="name" label="开通/到期时间" />
                        <el-table-column prop="name" label="续费周期" />
                        <el-table-column prop="name" label="操作" />
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>
<script setup lang="ts">
const activeName = "first";
</script>
<style scoped lang="scss">
.tabtop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .tabtopr {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .tabtoprl {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-right: 20px;
            .tabtoprlItem {
                height: 32px;
                line-height: 32px;
                background: #f1f1f1;
                margin-left: 5px;
                padding: 0 15px;
                cursor: pointer;
            }
        }
        button {
            margin-left: 20px;
        }
    }
}
</style>
